<template>
  <ul class="navlist">
    <router-link
      custom
      :to="nav.path"
      v-for="nav in navlist"
      :key="nav.name"
      v-slot="{ isActive, navigate }"
    >
      <li @click="navigate" :class="isActive ? 'active' : ''">
        <div>{{ nav.name }}</div>
      </li>
    </router-link>
  </ul>
  <router-view></router-view>
</template>

<script setup>
import { reactive } from "vue";

const navlist = reactive([
  {
    path: "/films/nowplaying",
    name: "正在热映",
  },
  {
    path: "/films/comingsoon",
    name: "即将上映",
  },
]);
</script>

<style scoped>
.navlist {
  display: flex;
  width: 100vw;
  color: black;
  list-style: none;
}

.navlist li {
  padding: 3vw 1vw;
  text-align: center;
  font-size: 5vw;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navlist li div {
  padding: 1.8vw 1.5vw;
  border-bottom: 0.6vw solid transparent;
}

.navlist .active div {
  color: orange;
  border-bottom: 0.6vw solid orange;
}
</style>